<!--
 * @Description: 活动管理新增编辑页面
 * @Author: liyujie
 * @Date: 2021/2/23
 * @Last Modified by: liyujie
 * @Last Modified time: 2021/07/12
-->
<template>
    <div class="wrapper">
        <div class="content-wrapper">
            <!-- header -->
            <page-header :title="type === 'edit' ? '编辑活动' : type === 'add' ? '创建活动' : '查看活动'">
                <template slot="header-right">
                    <div
                        class="back"
                        @click="handleRoute('elitePkActivityList')"
                    >返回</div>
                </template>
            </page-header>
            <div>
                <div class="form-view">
                    <!--表单-->
                    <el-form
                        :model="ruleForm"
                        :rules="rules"
                        label-position="right"
                        ref="ruleForm"
                        label-width="192px"
                        class="form-wrap"
                        :disabled="type === 'detail'"
                        @submit.native.prevent
                    >
                        <div
                            class="form-title"
                            style="margin-top: 0"
                        >基本信息</div>
                        <el-form-item
                            label="PK赛类型"
                            prop="type"
                            class="is-required"
                        >
                            <el-select
                                v-model="ruleForm.type"
                                size="medium"
                                placeholder="请选择"
                                style="width: 469px"
                                :disabled="type === 'detail' || isDisabled"
                            >
                                <el-option
                                    label="个人PK赛"
                                    :value="1"
                                />
                                <el-option
                                    label="学校PK赛"
                                    :value="2"
                                />
                            </el-select>
                        </el-form-item>
                        <el-form-item
                            label="活动名称"
                            prop="title"
                            class="is-required"
                        >
                            <el-input
                                v-model="ruleForm.title"
                                size="medium"
                                clearable
                                placeholder="请输入活动名称"
                                style="width: 469px"
                                maxlength="20"
                                show-word-limit
                                :disabled="type === 'detail' || isDisabled"
                            />
                        </el-form-item>
                        <el-form-item
                            label="活动banner"
                            prop="banner_url"
                            class="is-required"
                        >
                            <el-upload
                                :show-file-list="false"
                                action="noAction"
                                class="upload-view"
                                :http-request="(e) => handleUpload(e, 'banner_url')"
                                accept="image/*"
                                drag
                                :disabled="type === 'detail' || isDisabled"
                            >
                                <img
                                    v-if="ruleForm.banner_url"
                                    :src="ruleForm.banner_url"
                                >
                                <i
                                    class="el-icon-upload"
                                    v-if="!ruleForm.banner_url"/>
                                <div
                                    class="el-upload__text"
                                    v-if="!ruleForm.banner_url">将文件拖到此处，或<em>点击上传</em></div>
                                <div
                                    class="el-upload__tip"
                                    slot="tip"
                                >
                                    格式支持jpg、png、jpeg；尺寸：3336*456px，展示在商家端
                                </div>
                            </el-upload>
                        </el-form-item>
                        <el-form-item
                            label="活动logo"
                            prop="logo_url"
                            class="is-required image-label"
                        >
                            <image-upload
                                v-model="ruleForm.logo_url"
                                :limit="50"
                                :type="(type === 'detail' || isDisabled) ? 'detail' : 'add'"
                                tips="图标大小255*255px，小于50kb，展示在商家端"
                                class="task-logo-wrapper"
                            />
                        </el-form-item>
                        <el-form-item
                            label="活动期数"
                            prop="index"
                            class="is-required"
                        >
                            <span style="color: #606266;margin-right: 6px">第</span>
                            <el-input-number
                                v-model="ruleForm.index"
                                placeholder="请输入活动期数"
                                :step="1"
                                step-strictly
                                :controls="false"
                                :min="1"
                                size="medium"
                                style="width: 223px"
                                :disabled="type === 'detail' || isDisabled"
                            />
                            <span style="color: #606266;margin: 0 6px">期</span>
                        </el-form-item>
                        <el-form-item
                            label="商家报名时间"
                            prop="shop_apply_start_time"
                            class="is-required"
                        >
                            <div style="display: flex; align-items: center">
                                <el-form-item prop="shop_apply_start_time">
                                    <el-date-picker
                                        v-model="ruleForm.shop_apply_start_time"
                                        type="datetime"
                                        default-time="00:00:00"
                                        size="medium"
                                        placeholder="请选择开始时间"
                                        style="width: 218px"
                                        value-format="timestamp"
                                        :disabled="type === 'detail' || isDisabled"
                                    />
                                </el-form-item>
                                <span style="margin: 0 12px">-</span>
                                <el-form-item prop="shop_apply_end_time">
                                    <el-date-picker
                                        v-model="ruleForm.shop_apply_end_time"
                                        type="datetime"
                                        placeholder="请选择结束时间"
                                        default-time="23:59:59"
                                        size="medium"
                                        style="width: 218px"
                                        value-format="timestamp"
                                        :disabled="type === 'detail' || ruleForm.activity_status >= 3"
                                    />
                                </el-form-item>
                            </div>
                        </el-form-item>
                        <el-form-item
                            label="活动进行时间"
                            prop="activity_start_time"
                            class="is-required"
                        >
                            <div style="display: flex; align-items: center">
                                <el-form-item prop="activity_start_time">
                                    <el-date-picker
                                        v-model="ruleForm.activity_start_time"
                                        type="datetime"
                                        default-time="00:00:00"
                                        size="medium"
                                        placeholder="请选择开始时间"
                                        style="width: 218px"
                                        value-format="timestamp"
                                        :disabled="type === 'detail' || isDisabled"
                                    />
                                </el-form-item>
                                <span style="margin: 0 12px">-</span>
                                <el-form-item prop="activity_end_time">
                                    <el-date-picker
                                        v-model="ruleForm.activity_end_time"
                                        type="datetime"
                                        placeholder="请选择结束时间"
                                        default-time="23:59:59"
                                        size="medium"
                                        style="width: 218px"
                                        value-format="timestamp"
                                        :disabled="type === 'detail' || ruleForm.status === 0"
                                    />
                                </el-form-item>
                            </div>
                        </el-form-item>
                        <el-form-item
                            label="再次提交截止时间"
                            prop="re_apply_end_time"
                            class="is-required"
                        >
                            <el-date-picker
                                v-model="ruleForm.re_apply_end_time"
                                type="datetime"
                                placeholder="请选择结束时间"
                                default-time="23:59:59"
                                size="medium"
                                style="width: 469px"
                                value-format="timestamp"
                                :disabled="type === 'detail' || isDisabled"
                            />
                            <span class="form-tips">说明：该时间用于商家被驳回后，可执行再次提交操作的截至时间。</span>
                        </el-form-item>
                        <div class="form-title">
                            奖金池设置
                            <span class="form-tips">仅用于APP中显示</span>
                        </div>
                        <!--新版本-->
                        <div
                            class="new-version"
                            v-if="ruleForm.version === 2"
                        >
                            <el-form-item label="指定排名奖励">
                                <div class="rank-wrapper">
                                    <div
                                        class="rank-list"
                                        v-if="ruleForm.rank_award.length"
                                    >
                                        <div
                                            class="rank-item"
                                            v-for="(item,index) in ruleForm.rank_award"
                                            :key="index"
                                        >
                                            <div class="rank-item__header">
                                                <div class="rank-num">第{{ numberChinese(index + 1) }}名</div>
                                                <el-button
                                                    type="text"
                                                    size="medium"
                                                    :disabled="type === 'detail' || isDisabled"
                                                    @click="ruleForm.rank_award.splice(index, 1)"
                                                >删除</el-button>
                                            </div>
                                            <div class="rank-item__content">
                                                <el-form-item
                                                    :prop="`rank_award[${index}].award_money`"
                                                    :rules="rules.award_money"
                                                >
                                                    <el-input
                                                        v-model="item.award_money"
                                                        size="medium"
                                                        style="width: 100%"
                                                        placeholder="请输入"
                                                        :disabled="type === 'detail' || isDisabled"
                                                    >
                                                        <span
                                                            slot="suffix"
                                                            style="margin-right: 6px"
                                                        >元</span>
                                                    </el-input>
                                                </el-form-item>
                                            </div>
                                        </div>
                                    </div>
                                    <div
                                        class="empty-text"
                                        v-else
                                    >设置销售额排名奖励，该奖励为奖金池外的额外奖励，如第一名奖励100元；</div>
                                    <el-button
                                        size="medium"
                                        icon="el-icon-plus"
                                        class="add-button"
                                        :disabled="type === 'detail' || isDisabled"
                                        v-if="ruleForm.rank_award.length < 10"
                                        @click="handleAddAward"
                                    >新增</el-button>
                                </div>
                            </el-form-item>
                            <el-form-item
                                label="奖金池设置"
                                class="is-required"
                                v-if="ruleForm.type === 1"
                            >
                                <div class="award-wrapper">
                                    <div class="award-item">
                                        <span>· 奖金池基础金额</span>
                                        <el-form-item prop="pool_award_pool_start_money">
                                            <el-input
                                                v-model="ruleForm.pool_award_pool_start_money"
                                                size="medium"
                                                placeholder="请输入"
                                                style="width: 206px;margin-right: 36px"
                                                :disabled="type === 'detail' || isDisabled"
                                            >
                                                <span
                                                    slot="suffix"
                                                    style="margin-right: 6px"
                                                >元</span>
                                            </el-input>
                                        </el-form-item>
                                        <span>奖金池上限</span>
                                        <el-form-item prop="pool_award_pool_max_money">
                                            <el-input
                                                v-model="ruleForm.pool_award_pool_max_money"
                                                size="medium"
                                                placeholder="请输入"
                                                style="width: 206px"
                                                :disabled="type === 'detail' || isDisabled"
                                            >
                                                <span
                                                    slot="suffix"
                                                    style="margin-right: 6px"
                                                >元</span>
                                            </el-input>
                                        </el-form-item>
                                    </div>
                                    <div class="award-item">
                                        <span>· 下单人数每增加</span>
                                        <el-form-item prop="pool_award_pool_step_require_student_count">
                                            <el-input
                                                v-model="ruleForm.pool_award_pool_step_require_student_count"
                                                size="medium"
                                                placeholder="请输入"
                                                style="width: 206px;margin-right: 36px"
                                                :disabled="type === 'detail' || isDisabled"
                                            >
                                                <span
                                                    slot="suffix"
                                                    style="margin-right: 6px"
                                                >人</span>
                                            </el-input>
                                        </el-form-item>
                                        <span>奖金池增加</span>
                                        <el-form-item prop="pool_award_pool_step_append_money">
                                            <el-input
                                                v-model="ruleForm.pool_award_pool_step_append_money"
                                                size="medium"
                                                placeholder="请输入"
                                                style="width: 206px"
                                                :disabled="type === 'detail' || isDisabled"
                                            >
                                                <span
                                                    slot="suffix"
                                                    style="margin-right: 6px"
                                                >元</span>
                                            </el-input>
                                        </el-form-item>
                                        <span class="form-tips">
                                            （以账号维度去统计，去重）
                                        </span>
                                    </div>
                                </div>
                            </el-form-item>
                            <el-form-item
                                label="奖金池设置"
                                class="is-required"
                                v-if="ruleForm.type === 2"
                            >
                                <el-input-number
                                    v-model="ruleForm.pool_award_money"
                                    placeholder="请输入奖金池金额"
                                    size="medium"
                                    clearable
                                    style="width: 469px"
                                    :controls="false"
                                    :step="0.01"
                                    step-strictly
                                    :min="0"
                                />
                            </el-form-item>
                            <el-form-item
                                label="瓜分奖金池设置"
                                class="is-required"
                            >
                                <div
                                    class="award-wrapper"
                                    style="padding: 32px 24px"
                                >
                                    <div
                                        class="award-item"
                                        v-for="(item,index) in ruleForm.pool_award_pool_step_set"
                                        :key="index"
                                    >
                                        <template v-if="index === 0">
                                            <span>· 所有出单的用户，瓜分总奖金池</span>
                                            <el-form-item>
                                                <el-input
                                                    v-model="item.award_money_percent"
                                                    size="medium"
                                                    placeholder="请输入"
                                                    style="width: 206px;margin-right: 36px"
                                                    :disabled="type === 'detail' || isDisabled"
                                                >
                                                    <span
                                                        slot="suffix"
                                                        style="margin-right: 6px"
                                                    >%</span>
                                                </el-input>
                                            </el-form-item>
                                        </template>
                                        <template v-else>
                                            <span>· 销售额排名前</span>
                                            <el-form-item
                                                :prop="`pool_award_pool_step_set[${index}].rank_end_percent`"
                                                :rules="rules.rank_end_percent"
                                            >
                                                <el-input
                                                    v-model="item.rank_end_percent"
                                                    size="medium"
                                                    placeholder="请输入"
                                                    style="width: 206px;margin-right: 10px"
                                                    :disabled="type === 'detail' || isDisabled"
                                                >
                                                    <span
                                                        slot="suffix"
                                                        style="margin-right: 6px"
                                                    >%</span>
                                                </el-input>
                                            </el-form-item>
                                            <span>的用户，瓜分总奖金池</span>
                                            <el-form-item
                                                :prop="`pool_award_pool_step_set[${index}].award_money_percent`"
                                                :rules="rules.award_money_percent"
                                            >
                                                <el-input
                                                    v-model="item.award_money_percent"
                                                    size="medium"
                                                    placeholder="请输入"
                                                    style="width: 206px"
                                                    :disabled="type === 'detail' || isDisabled"
                                                >
                                                    <span
                                                        slot="suffix"
                                                        style="margin-right: 6px"
                                                    >%</span>
                                                </el-input>
                                            </el-form-item>
                                            <el-button
                                                type="text"
                                                size="medium"
                                                style="margin-left: 24px"
                                                :disabled="type === 'detail' || isDisabled"
                                                @click="ruleForm.pool_award_pool_step_set.splice(index, 1)"
                                            >
                                                删除
                                            </el-button>
                                        </template>
                                    </div>
                                    <el-button
                                        size="medium"
                                        icon="el-icon-plus"
                                        class="add-button"
                                        :disabled="type === 'detail' || isDisabled"
                                        @click="handleAdd"
                                    >新增</el-button>
                                </div>
                            </el-form-item>
                        </div>
                        <div
                            class="old-version"
                            v-if="ruleForm.version === 1"
                        >
                            <el-form-item
                                label="指定排名奖励"
                                class="is-required"
                            >
                                <div class="rank-wrapper">
                                    <div class="rank-item">
                                        <div class="rank-item__title">第一名</div>
                                        <el-form-item
                                            prop="first_award_money"
                                            :rules="rules.award_money"
                                        >
                                            <el-input
                                                v-model="ruleForm.first_award_money"
                                                size="medium"
                                                style="width: 100%"
                                                placeholder="请输入奖励金额"
                                                :disabled="type === 'detail' || isDisabled"
                                            >
                                                <span
                                                    slot="suffix"
                                                    style="margin-right: 6px"
                                                >元</span>
                                            </el-input>
                                        </el-form-item>
                                    </div>
                                    <div class="rank-item">
                                        <div class="rank-item__title">第二名</div>
                                        <el-form-item
                                            prop="second_award_money"
                                            :rules="rules.award_money"
                                        >
                                            <el-input
                                                v-model="ruleForm.second_award_money"
                                                size="medium"
                                                placeholder="请输入奖励金额"
                                                :disabled="type === 'detail' || isDisabled"
                                            >
                                                <span
                                                    slot="suffix"
                                                    style="margin-right: 6px"
                                                >元</span>
                                            </el-input>
                                        </el-form-item>
                                    </div>
                                    <div class="rank-item">
                                        <div class="rank-item__title">第三名</div>
                                        <el-form-item
                                            prop="third_award_money"
                                            :rules="rules.award_money"
                                        >
                                            <el-input
                                                v-model="ruleForm.third_award_money"
                                                size="medium"
                                                placeholder="请输入奖励金额"
                                                :disabled="type === 'detail' || isDisabled"
                                            >
                                                <span
                                                    slot="suffix"
                                                    style="margin-right: 6px"
                                                >元</span>
                                            </el-input>
                                        </el-form-item>
                                    </div>
                                </div>
                            </el-form-item>
                            <el-form-item
                                label="奖金池设置"
                                class="is-required"
                            >
                                <div class="award-wrapper">
                                    <div
                                        class="award-item"
                                        v-for="(item, index) in ruleForm.pool_award_pool_step"
                                        :key="index"
                                    >
                                        <span>· 参与人数达到</span>
                                        <el-form-item
                                            :prop="`pool_award_pool_step[${index}].require_student_count`"
                                            :rules="rules.require_student_count"
                                        >
                                            <el-input
                                                v-model="item.require_student_count"
                                                size="medium"
                                                placeholder="请输入"
                                                style="width: 206px;margin-right: 36px"
                                                :disabled="type === 'detail' || isDisabled || index === 0"
                                            >
                                                <span
                                                    slot="suffix"
                                                    style="margin-right: 6px"
                                                >人</span>
                                            </el-input>
                                        </el-form-item>
                                        <span>解锁奖金池</span>
                                        <el-form-item
                                            :prop="`pool_award_pool_step[${index}].award_money`"
                                            :rules="rules.award_money"
                                        >
                                            <el-input
                                                v-model="item.award_money"
                                                size="medium"
                                                placeholder="请输入"
                                                style="width: 206px"
                                                :disabled="type === 'detail' || isDisabled"
                                            >
                                                <span
                                                    slot="suffix"
                                                    style="margin-right: 6px"
                                                >元</span>
                                            </el-input>
                                        </el-form-item>
                                        <el-button
                                            type="text"
                                            class="delete"
                                            v-if="index"
                                            :style="{cursor: (type === 'detail' || isDisabled) ? 'not-allowed' : 'pointer'}"
                                            :disabled="type === 'detail' || isDisabled"
                                            @click="handleDelete(index, 'pool_award_pool_step')"
                                        >删除</el-button>
                                    </div>
                                    <el-button
                                        size="medium"
                                        icon="el-icon-plus"
                                        class="add-button"
                                        :disabled="type === 'detail' || isDisabled"
                                        @click="handleAddOld('pool_award_pool_step')"
                                    >新增</el-button>
                                </div>
                            </el-form-item>
                            <el-form-item
                                label="瓜分奖金池设置"
                                class="is-required"
                            >
                                <div style="display: flex">
                                    <span style="color: #606266;margin-right: 6px">排名前</span>
                                    <el-form-item prop="pool_award_student_percent">
                                        <el-input
                                            v-model="ruleForm.pool_award_student_percent"
                                            size="medium"
                                            placeholder="请输入"
                                            style="width: 206px;"
                                            :disabled="type === 'detail' || isDisabled"
                                        >
                                            <span
                                                slot="suffix"
                                                style="margin-right: 6px"
                                            >%</span>
                                        </el-input>
                                    </el-form-item>
                                    <span style="color: #606266;margin: 0 6px">瓜分总奖金池</span>
                                </div>
                            </el-form-item>
                        </div>
                        <div class="form-title">商家报名商品规则</div>
                        <el-form-item
                            label="报名商家限制"
                            label-width="206px"
                            class="is-required"
                        >
                            <el-radio-group
                                v-model="ruleForm.shop_apply_shop_limit_type"
                                :disabled="type === 'detail' || isDisabled"
                            >
                                <el-radio :label="0">全部商家</el-radio>
                                <el-radio :label="1">部分商家</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item
                            label-width="206px"
                            v-if="ruleForm.shop_apply_shop_limit_type === 1"
                        >
                            <div class="shop-wrapper">
                                <div class="shop-header">已选商家</div>
                                <div
                                    class="shop-content"
                                    v-if="ruleForm.apply_shop_limit_shop_nos.length"
                                >
                                    <div class="btn-view">
                                        <el-button
                                            type="primary"
                                            size="medium"
                                            :disabled="type === 'detail'"
                                            @click="handleSelectShop('edit')"
                                        >修改已选商家</el-button>
                                    </div>
                                    <div class="table-wrapper">
                                        <el-table :data="pageData">
                                            <el-table-column
                                                label="序号"
                                                type="index"
                                                width="80"
                                                align="center"
                                            />
                                            <el-table-column
                                                prop="shop_title"
                                                label="商家名称"
                                            />
                                            <el-table-column
                                                label="操作"
                                                align="center"
                                            >
                                                <template slot-scope="scope">
                                                    <el-button
                                                        type="text"
                                                        :disabled="type === 'detail' || isDisabled"
                                                        @click="handleRemove(scope.row)"
                                                    >移除</el-button>
                                                </template>
                                            </el-table-column>
                                        </el-table>
                                    </div>
                                    <div class="table-footer">
                                        <div>
                                            已选商家<span class="count">（{{ ruleForm.apply_shop_limit_shop_nos.length }}）</span>
                                        </div>
                                        <div class="pagination">
                                            <el-pagination
                                                layout="prev, pager, next"
                                                :current-page.sync="page.now_page"
                                                :total="page.total_count"
                                                :page-size="page.page_size"
                                                @current-change="getPageData"
                                            />
                                        </div>
                                    </div>
                                </div>
                                <div
                                    class="shop-content-empty"
                                    v-else
                                >
                                    <div class="empty-title">当前没有选择商家哦～</div>
                                    <div class="empty-sub-title">请点击下方按钮，选择部分可以参加活动的商家～</div>
                                    <div
                                        class="empty-btn"
                                        @click="handleSelectShop"
                                    >选择商家</div>
                                </div>
                            </div>
                        </el-form-item>
                        <el-form-item
                            label="单个商家提报商品数量"
                            prop="apply_limit_count"
                            class="is-required"
                            label-width="206px"
                        >
                            <el-input
                                v-model="ruleForm.apply_limit_count"
                                size="medium"
                                placeholder="请输入商品数量"
                                style="width: 469px"
                                :disabled="type === 'detail' || isDisabled"
                            >
                                <span
                                    slot="suffix"
                                    style="margin-right: 6px"
                                >款</span>
                            </el-input>
                        </el-form-item>
                        <el-form-item
                            label="最低活动库存"
                            prop="require_goods_product_min"
                            class="is-required"
                            label-width="206px"
                        >
                            <el-input
                                v-model="ruleForm.require_goods_product_min"
                                size="medium"
                                placeholder="请输入商品数量"
                                style="width: 469px"
                                :disabled="type === 'detail' || isDisabled"
                            />
                        </el-form-item>
                        <el-form-item
                            label="商家设置佣金比例不能低于"
                            prop="commission_rate_require"
                            class="is-required"
                            label-width="206px"
                        >
                            <el-input
                                v-model="ruleForm.commission_rate_require"
                                size="medium"
                                placeholder="请输入"
                                style="width: 469px"
                                :disabled="type === 'detail' || isDisabled"
                            >
                                <span
                                    slot="suffix"
                                    style="margin-right: 6px"
                                >%</span>
                            </el-input>
                        </el-form-item>
                        <el-form-item
                            label="商品活动价不能高于近30天最低学生价的"
                            prop="max_price_rate_30_days"
                            class="is-required"
                            label-width="276px"
                        >
                            <el-input
                                v-model="ruleForm.max_price_rate_30_days"
                                size="medium"
                                placeholder="请输入"
                                style="width: 168px"
                                :disabled="type === 'detail' || isDisabled"
                            >
                                <span
                                    slot="suffix"
                                    style="margin-right: 6px"
                                >折</span>
                            </el-input>
                        </el-form-item>
                        <el-form-item
                            label="可参与的商品类目"
                            prop="valid_goods_type_nos"
                            class="is-required"
                            label-width="206px"
                        >
                            <div class="type-wrapper">
                                <div class="type-header">
                                    <el-checkbox
                                        :disabled="isDisabled"
                                        @change="handleCheckAll"
                                    >全部类目</el-checkbox>
                                </div>
                                <el-checkbox-group
                                    v-model="typeSelection"
                                    class="type-content"
                                    :disabled="isDisabled"
                                >
                                    <div
                                        class="type-item"
                                        v-for="(item,index) in typeList"
                                        :key="item.no"
                                        @mouseenter="handleClick(item, index)"
                                        @mouseleave="handleLeave(item, index)"
                                    >
                                        <div class="type-label">
                                            <el-checkbox
                                                :label="item.no"
                                                @change="handleChange($event, item, index)"
                                            >
                                                {{ item.title | setNumber }}
                                                <span
                                                    class="type-select-count"
                                                    v-if="item.checkedLength"
                                                >({{ item.checkedLength }})</span>
                                                <i
                                                    class="el-icon-caret-bottom"
                                                    v-if="item.children.length"
                                                    :style="{
                                                        transform: item.show && index === now_index ? `rotate(180deg)` : '',
                                                        transition: 'all 0.2s',
                                                        marginLeft: '8px'
                                                    }"
                                                />
                                            </el-checkbox>
                                        </div>
                                        <div
                                            class="sub-type-wrapper"
                                            v-show="index === now_index && item.show && item.children.length !== 0"
                                        >
                                            <el-checkbox-group
                                                v-model="ruleForm.valid_goods_type_nos"
                                                class="sub-content"
                                                :disabled="isDisabled"
                                            >
                                                <div
                                                    class="sub-type-item"
                                                    v-for="option in item.children"
                                                    :key="option.no"
                                                >
                                                    <el-checkbox
                                                        :label="option.no"
                                                        @change="subTypeChange($event, item)"
                                                    >
                                                        {{ option.title | setNumber }}
                                                    </el-checkbox>
                                                </div>
                                            </el-checkbox-group>
                                        </div>
                                    </div>
                                </el-checkbox-group>
                            </div>
                        </el-form-item>
                        <el-form-item
                            label="活动开始后是否锁定商品信息"
                            class="is-required"
                            label-width="206px"
                        >
                            <div style="display: flex;align-items: center;height: 40px">
                                <el-radio-group
                                    v-model="ruleForm.lock_goods"
                                    :disabled="isDisabled"
                                    style="width: 164px;flex-shrink: 0"
                                >
                                    <el-radio :label="1">锁定</el-radio>
                                    <el-radio :label="0">不锁定</el-radio>
                                </el-radio-group>
                                <span
                                    class="form-tips"
                                    style="line-height: 18px"
                                >说明：选择锁定后，活动开始前，商家可以修改原商品信息，如果商家删除已报名的SKU，则该报名商品将会被系统自动审核不通过，活动开始后，商家不可以修改原商品信息，需要在活动招商规则协议告知商家。</span>
                            </div>
                        </el-form-item>
                        <el-form-item
                            label="活动商品是否需要包邮"
                            class="is-required"
                            label-width="206px"
                            style="margin-bottom: 36px"
                        >
                            <el-radio-group
                                v-model="ruleForm.freight_free_type"
                                class="radio-wrapper"
                                :disabled="isDisabled"
                            >
                                <div class="radio-item">
                                    <el-radio :label="0">不限制</el-radio>
                                </div>
                                <div class="radio-item">
                                    <el-radio :label="1">常规地区包邮</el-radio>
                                    <span
                                        class="form-tips"
                                        style="margin-left: 0"
                                    >说明：活动商品收货地为中国（<span style="color: #666666">不包括</span>中国香港、中国澳门、中国台湾地区及西藏，新疆，内蒙古，甘肃，广西，贵州，青海上述偏远地区）的包邮服务。</span>
                                </div>
                                <div class="radio-item">
                                    <el-radio :label="2">全国地区包邮</el-radio>
                                    <span
                                        class="form-tips"
                                        style="margin-left: 0"
                                    >说明：活动商品收货地为中国（<span style="color: #666666">包括</span>中国香港、中国澳门、中国台湾地区及西藏，新疆，内蒙古，甘肃，广西，贵州，青海上述偏远地区）的包邮服务，<span style="color: #333; text-decoration: underline">选择该选项需谨慎，以免造成资损。</span></span>
                                </div>
                            </el-radio-group>
                        </el-form-item>
                        <div
                            class="form-title"
                            style="margin-top: 48px"
                        >叠加优惠和限购设置</div>
                        <el-form-item
                            label="活动可叠加优惠"
                            class="is-required"
                            label-width="206px"
                        >
                            <el-checkbox-group
                                v-model="ruleForm.order_discount_flag_list"
                                :disabled="isDisabled"
                            >
                                <el-checkbox :label="2">商家优惠券</el-checkbox>
                                <el-checkbox :label="1">商家满减</el-checkbox>
                                <el-checkbox :label="4">平台优惠券</el-checkbox>
                                <el-checkbox :label="8">平台红包</el-checkbox>
                                <el-checkbox :label="16">一卡通折扣</el-checkbox>
                            </el-checkbox-group>
                        </el-form-item>
                        <el-form-item
                            label="单个商品被审核驳回"
                            prop="re_apply_limit_count"
                            class="is-required"
                            label-width="206px"
                        >
                            <el-input
                                v-model="ruleForm.re_apply_limit_count"
                                size="medium"
                                placeholder="请输入"
                                style="width: 143px"
                                :disabled="type === 'detail' || isDisabled"
                            >
                                <span
                                    slot="suffix"
                                    style="margin-right: 6px"
                                >次</span>
                            </el-input>
                            <span style="font-size: 14px;color: #333333;margin-left: 12px">不能再次提交报名</span>
                        </el-form-item>
                        <el-form-item
                            label="活动限购设置"
                            class="is-required"
                            label-width="206px"
                        >
                            <el-radio-group
                                v-model="ruleForm.buy_limit_count_type"
                                class="radio-wrapper"
                                :disabled="isDisabled"
                            >
                                <div class="radio-item">
                                    <el-radio :label="0">本次活动限购不受限于原商品详情的限购设置</el-radio>
                                    <span
                                        class="form-tips"
                                        style="margin-left: 0"
                                    >说明：只适用于本次报名的活动限购，如果原商品详情有限购设置，则本次活动限购<span style="color: #666666; text-decoration: underline">不受限</span>于原商品详情的限购设置，只会以本次设置的活动限购数量作为限购数量标准</span>
                                </div>
                                <div class="radio-item">
                                    <el-radio :label="1">本次活动限购受限于原商品详情的限购设置</el-radio>
                                    <span
                                        class="form-tips"
                                        style="margin-left: 0"
                                    >说明：只适用于本次报名的活动限购，如果原商品详情有限购设置，则本次活动限购<span style="color: #666666; text-decoration: underline">受限</span>于原商品详情的限购设置，选择该选项，会对本次设置的活动限购数量和原商品详情的限购设置进行双重判断</span>
                                </div>
                            </el-radio-group>
                        </el-form-item>
                        <div
                            class="form-title"
                            style="margin-top: 48px"
                        >活动招商协议</div>
                        <el-form-item
                            label="活动招商协议"
                            class="is-required"
                            label-width="206px"
                            :style="{pointerEvents: isDisabled ? 'none' : ''}"
                        >
                            <ueditor
                                :default-value="ruleForm.apply_rule_content"
                                ref="ueditor"
                                style="width: 862px"
                            />
                        </el-form-item>
                        <el-form-item label-width="206px">
                            <div class="ueditor-tips">
                                <span>注意：在输入招商协议的时候请仔细编写协议的段落样式，此处设置的段落样式、字体样式将会在商家后台报名处展示</span>
                                <el-button
                                    size="medium"
                                    @click="handlePreview"
                                >
                                    预览协议
                                </el-button>
                            </div>
                        </el-form-item>
                    </el-form>
                </div>

                <!-- button -->
                <div class="footer">
                    <el-button
                        size="medium"
                        type="default"
                        @click="handleCancel()"
                    >
                        返回
                    </el-button>
                    <el-button
                        size="medium"
                        type="primary"
                        @click="handleSubmit()"
                    >
                        保存
                    </el-button>
                    <el-button
                        size="medium"
                        type="primary"
                        v-if="type === 'detail'"
                        @click="handleEdit"
                    >
                        编辑
                    </el-button>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import {back} from '@/mixin/back';
import ueditor from '@/components/common/ueditor.vue';
import {deepClone, numberChinese} from "@/assets/js/utils";
import ImageUpload from "@/components/common/image-upload";
import { shopSelectDialog } from '@/components/shop-manage/shop-select';
const numberReg = /(?:^[1-9]([0-9]+)?(?:\.[0-9]{1,2})?$)|(?:^(?:0)$)|(?:^[0-9]\.[0-9](?:[0-9])?$)/;
const intReg = /^(0|[1-9][0-9]*|-[1-9][0-9]*)$/;

const award_step_model = {
    require_student_count: '',
    award_money: ''
};

const award_model = {
    rank_end_percent: '',
    award_money_percent: ''
};

export default {
    name: 'ElitePkActivityEdit',
    data() {
        const checkActiveEndTime = (rule, value, callback) => {
            if(value > this.ruleForm.activity_start_time) {
                callback();
            } else {
                callback(new Error('结束时间不能小于开始时间'));
            }
        };

        const checkApplyEndTime = (rule, value, callback) => {
            if(value > this.ruleForm.shop_apply_start_time) {
                callback();
            } else {
                callback(new Error('结束时间不能小于开始时间'));
            }
        };

        const checkStudentCount = (rule, value, callback) => {
            let result = this.ruleForm.pool_award_pool_step.filter(item => {
                return item.require_student_count == value;
            });

            if(result.length > 1) {
                callback(new Error('参与人数不能重复'));
            } else {
                callback();
            }
        };

        const checkPercent = (rule, value, callback) => {
            if(Number(value) > 0 && Number(value) <= 100) {
                callback();
            } else {
                callback(new Error('百分比输入不正确'));
            }
        };

        return {
            // add新增 edit编辑 detail查看
            type: 'add',
            status: '',
            ruleForm: {
                type: 1,
                version: 2,
                pk_no: '',
                // 标题
                title: '',
                // banner
                banner_url: '',
                // logo
                logo_url: '',
                // 活动期数
                index: undefined,
                // 商家报名时间
                shop_apply_start_time: '',
                shop_apply_end_time: '',
                // 活动时间
                activity_start_time: '',
                activity_end_time: '',
                // 重新报名结束时间
                re_apply_end_time: '',
                // 是否锁定
                lock_goods: 1,
                // 运费包邮
                freight_free_type: 0,
                // 限购
                buy_limit_count_type: 0,
                // 优惠叠加
                order_discount_flag_list: [1, 2, 4, 8, 16],
                // 协议
                apply_rule_content: '',
                // 报名店铺限制类型 0不限 1部分
                shop_apply_shop_limit_type: 0,
                // 限制的店铺编号 ,隔开
                apply_shop_limit_shop_nos: [],
                // 商家提报数量限制
                apply_limit_count: '',
                // 再次提交限制
                re_apply_limit_count: '',
                // 商家提报最低库存
                require_goods_product_min: '',
                // 佣金比例
                commission_rate_require: '',
                // 学生价比例折扣
                max_price_rate_30_days: '',
                // 可提报类目
                valid_goods_type_nos: [],
                // version 2
                // 排名奖金
                rank_award: [],
                // 奖金池设置
                pool_award_pool_start_money: '',
                pool_award_pool_max_money: '',
                pool_award_pool_step_require_student_count: '',
                pool_award_pool_step_append_money: '',
                // 瓜分奖金池设置
                pool_award_pool_step_set: [{rank_end_percent: 100, award_money_percent: ''}],
                // version 1
                // 前三名奖金
                first_award_money: '',
                second_award_money: '',
                third_award_money: '',
                // 奖金池设置
                pool_award_pool_step: [{require_student_count: 1, award_money: ''}, deepClone(award_step_model), deepClone(award_step_model)],
                // 瓜分奖金池设置
                pool_award_student_percent: '',
                activity_status: 0,
                // 学校PK赛奖金池 v2.2.3 type=2
                pool_award_money: 0
            },
            // 分类列表
            typeList: [],
            pageData: [],
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 20
            },
            rules: {
                title: [
                    {required: true, message: '请填写活动主题', trigger: 'blur'}
                ],
                banner_url: [
                    {required: true, message: '请上传活动海报', trigger: 'change'}
                ],
                logo_url: [
                    {required: true, message: '请上传活动logo', trigger: 'change'}
                ],
                index: [
                    {required: true, message: '请填写活动期数', trigger: 'blur'}
                ],
                shop_apply_start_time: [
                    {required: true, message: '请选择商家报名开始时间', trigger: 'change'}
                ],
                shop_apply_end_time: [
                    {required: true, message: '请选择商家报名结束时间', trigger: 'change'},
                    { validator: checkApplyEndTime, trigger: 'change' }
                ],
                activity_start_time: [
                    {required: true, message: '请选择活动开始时间', trigger: 'change'}
                ],
                activity_end_time: [
                    {required: true, message: '请选择活动结束时间', trigger: 'change'},
                    { validator: checkActiveEndTime, trigger: 'change' }
                ],
                re_apply_end_time: [
                    {required: true, message: '请选择再次提交截止时间', trigger: 'change'}
                ],
                apply_limit_count: [
                    {required: true, message: '请填写单个商家提报商品数量', trigger: 'blur'},
                    {pattern: intReg, message: '商品数量须为数字', trigger: 'blur'},
                ],
                require_goods_product_min: [
                    {required: true, message: '请填写最低活动库存', trigger: 'blur'},
                    {pattern: intReg, message: '活动库存必须为数字', trigger: 'blur'},
                ],
                max_price_rate_30_days: [
                    {required: true, message: '请填写折扣', trigger: 'blur'},
                    {pattern: /^(0|10|(0.[1-9]{1,2})|(([1-9]{1})(.\d{1,2})?))$/, message: '请输入正确的折扣', trigger: 'blur'},
                ],
                re_apply_limit_count: [
                    {required: true, message: '请填写驳回次数', trigger: 'blur'},
                    {pattern: intReg, message: '驳回次数须为数字', trigger: 'blur'},
                ],
                commission_rate_require: [
                    {required: true, message: '请填写商家设置佣金比例', trigger: 'blur'},
                    {pattern: numberReg, message: '佣金比例格式不正确', trigger: 'blur'},
                ],
                apply_rule_content: [
                    {required: true, message: '请填写活动招商协议', trigger: 'blur'},
                ],
                valid_goods_type_nos: [
                    {required: true, message: '请勾选可参与的商品类目', trigger: 'blur'},
                ],
                award_money: [
                    {required: true, message: '请填写奖励金额', trigger: 'blur'},
                    {pattern: numberReg, message: '金额必须为数字', trigger: 'blur'},
                ],
                require_student_count: [
                    {required: true, message: '请填写参与人数', trigger: 'blur'},
                    {pattern: /^(0|[1-9][0-9]*|-[1-9][0-9]*)$/, message: '人数必须为整数', trigger: 'blur'},
                    { validator: checkStudentCount, trigger: 'blur' }
                ],
                pool_award_student_percent: [
                    {required: true, message: '请填写排名百分比', trigger: 'blur'},
                    {pattern: numberReg, message: '百分比格式不正确', trigger: 'blur'},
                    { validator: checkPercent, trigger: 'blur' }
                ],
                rank_end_percent: [
                    {required: true, message: '请填写排名百分比', trigger: 'blur'},
                    {pattern: numberReg, message: '百分比格式不正确', trigger: 'blur'},
                    {validator: checkPercent, trigger: 'blur'},
                ],
                award_money_percent: [
                    {required: true, message: '请填写奖池百分比', trigger: 'blur'},
                    {pattern: numberReg, message: '百分比格式不正确', trigger: 'blur'},
                    {validator: checkPercent, trigger: 'blur'},
                ],
                pool_award_pool_start_money: [
                    {required: true, message: '请填写奖金池基础金额', trigger: 'blur'},
                    {pattern: numberReg, message: '金额必须为数字', trigger: 'blur'},
                ],
                pool_award_pool_max_money: [
                    {required: true, message: '请填写奖金池上限', trigger: 'blur'},
                    {pattern: numberReg, message: '金额必须为数字', trigger: 'blur'},
                ],
                pool_award_pool_step_require_student_count: [
                    {required: true, message: '请填写下单人数', trigger: 'blur'},
                    {pattern: intReg, message: '人数格式不正确', trigger: 'blur'},
                ],
                pool_award_pool_step_append_money: [
                    {required: true, message: '请填写奖金池增加金额', trigger: 'blur'},
                    {pattern: numberReg, message: '金额必须为数字', trigger: 'blur'},
                ],
            },
            typeSelection: [],
            now_index: 6,
            isDisabled: false,
            authResult: {}
        };
    },
    mixins: [back],
    watch: {},
    components: {ImageUpload, ueditor},
    mounted() {
        this.init();
        this.getTypeList();
    },
    filters: {
        setNumber (val) {
            if(val.length > 4) {
                return val.slice(0,4) + '...';
            } else {
                return val;
            }
        }
    },
    methods: {
        numberChinese,
        /**
         * @description 页面初始化
         */
        init() {
            let query = this.$route.query;

            this.$store.commit('SET_HEADER', [{title: "APP后台"}, {title: '校园精英PK赛'},
                {title: '活动列表', path: '/student/elite-pk-activity-list'},
                {title: query.type === 'edit' ? '编辑活动' : query.type === 'add' ? '新建活动' : '查看活动'}]);
            this.authResult = this.$route.meta.authResult;
            this.type = query.type;
            this.status = query.status;
            // 编辑或查看时
            if (query.type !== 'add') {
                this.ruleForm.pk_no = query.pk_no;
                this.getDetail();
            }
            if (query.type === 'copy') {
                this.type = 'add';
                this.ruleForm.pk_no = '';
            }
        },

        /**
         * 获取
         */
        getDetail() {
            let params = {
                pk_no: this.ruleForm.pk_no
            };

            this.$post('/student/task_stuagent_extra_pk_activity%5Cactivity_config%5Cget', params, resp => {
                if (resp.code === 1) {
                    let data = resp.data;
                    let query = this.$route.query;

                    data.re_apply_end_time = data.re_apply_end_time * 1000;
                    data.activity_start_time = data.activity_start_time * 1000;
                    data.activity_end_time = data.activity_end_time * 1000;
                    data.shop_apply_start_time = data.shop_apply_start_time * 1000;
                    data.shop_apply_end_time = data.shop_apply_end_time * 1000;
                    data.apply_shop_limit_shop_nos = data.apply_shop_limit_shop_list;
                    if(!data.rank_award) data.rank_award = [];
                    delete data.apply_shop_limit_shop_list;

                    this.ruleForm = data;
                    if(query.type === 'copy') {
                        this.ruleForm.activity_status = 0;
                        this.ruleForm.pk_no = '';
                    }
                    this.$refs.ueditor.setContent(resp.data.apply_rule_content);
                    this.getTypeList();
                    this.getPageData();
                    this.isDisabled = this.ruleForm.activity_status >= 1;
                } else {
                    this.$notify({
                        title: '提示',
                        message: resp.msg,
                        duration: 2000,
                        type: 'warning'
                    });
                }
            });
        },

        /**
         * @description 提交
         */
        handleSubmit() {
            this.$refs['ruleForm'].validate((valid) => {
                if (valid) {
                    this.ruleForm.apply_rule_content = this.$refs.ueditor ? this.$refs.ueditor.getUEContent() : '';
                    let params = deepClone(this.ruleForm);

                    if(!params.apply_rule_content) {
                        this.$notify({
                            title: '提示',
                            message: '活动招商协议不能为空',
                            type: 'warning'
                        });
                        return;
                    }

                    if(params.version === 2) {
                        // 瓜分奖金池的百分比相加要等于100%
                        let sum = this.ruleForm.pool_award_pool_step_set.reduce((prev, cur) => {
                            return Number(cur.award_money_percent) + prev;
                        }, 0);

                        if(sum !== 100) {
                            this.$notify.warning({
                                title: '提示',
                                message: '瓜分奖金池的百分比之和不等于100%，保存失败'
                            });
                            return;
                        }
                    }

                    params.re_apply_end_time = params.re_apply_end_time / 1000;
                    params.activity_start_time = params.activity_start_time / 1000;
                    params.activity_end_time = params.activity_end_time / 1000;
                    params.shop_apply_start_time = params.shop_apply_start_time / 1000;
                    params.shop_apply_end_time = params.shop_apply_end_time / 1000;
                    params.order_discount_flag_list = params.order_discount_flag_list.join();
                    params.valid_goods_type_nos = params.valid_goods_type_nos.join();
                    params.apply_shop_limit_shop_nos = params.apply_shop_limit_shop_nos.map(item => {
                        return item.shop_no;
                    }).join();
                    // v1
                    params.pool_award_pool_step_json = JSON.stringify(params.pool_award_pool_step);
                    delete params.pool_award_pool_step;

                    // v2
                    if(params.version === 2) {
                        let rank_award = params.rank_award.map((item, index) => {
                            return {
                                rank: index + 1,
                                award_money: item.award_money
                            };
                        });

                        params.rank_award_json = JSON.stringify(rank_award);
                        params.pool_award_pool_step_set_json = JSON.stringify(params.pool_award_pool_step_set);
                        delete params.rank_award;
                        delete params.pool_award_pool_step_set;
                    }
                    this.$post('/student/task_stuagent_extra_pk_activity%5Cactivity_config%5Csave', params, resp => {
                        if (resp.code === 1) {
                            this.$notify({
                                title: '提示',
                                message: '保存成功',
                                duration: 2000,
                                type: 'success'
                            });
                            this.$router.push({
                                name: 'elitePkActivityList'
                            });
                        } else {
                            this.$notify({
                                title: '提示',
                                message: resp.msg,
                                duration: 2000,
                                type: 'warning'
                            });
                        }
                    });
                } else {
                    this.$nextTick(() => {
                        // 校验不通过
                        if(document.getElementsByClassName('el-form-item__error').length > 0){
                            this.$notify.warning({
                                title: '提示',
                                message: document.getElementsByClassName('el-form-item__error')[0].innerText
                            });
                        }
                        return false;
                    });
                }
            });
        },

        /**
         * @description 返回
         */
        handleCancel() {
            if (this.type === 'detail') {
                this.$router.push({
                    name: 'elitePkActivityList'
                });
            } else {
                this.$zdConfirm('离开此页面后，已填写的信息将不会保存，确认离开此页面吗？', '温馨提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.$router.push({
                        name: 'elitePkActivityList'
                    });
                });
            }
        },

        /**
         * 文件上传
         * @param e
         * @param type
         */
        handleUpload(e, type) {
            let file = new FormData();

            file.append('file', e.file);
            this.$upload({
                url: '/__local/common%5Cupload',
                data: file,
                progress: e.onProgress,
                success: resp => {
                    if(resp.code === 1) {
                        this.ruleForm[type] = resp.data.url;
                    } else {
                        this.$notify({
                            title: '提示',
                            message: resp.msg,
                            duration: 2000,
                            type: 'warning'
                        });
                    }
                }
            });
        },

        /**
         * 上传图片之前 图片大小限制
         * @param file
         * @returns {boolean}
         */
        beforeUploadImage(file) {
            let type = ['image/jpeg', 'image/png', 'image/jpg'],
                isType = type.includes(file.type),
                isLt = file.size / 1024 < 500;

            if (!isType) {
                this.$notify({
                    title: '提示',
                    message: '格式仅支持jpg、jpeg、png',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }

            if (!isLt) {
                this.$notify({
                    title: '提示',
                    message: `图片大小不能超过500kb`,
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }

            return isType && isLt;
        },

        /**
         * 设置为编辑状态
         * @returns {boolean}
         */
        handleEdit() {
            if(!this.authResult.auth_edit) {
                this.$notify({
                    title: '提示',
                    message: '请联系管理员添加权限',
                    type: 'warning',
                    duration: 2000
                });
                return false;
            }

            this.type = 'edit';
        },

        /**
         * @description 获取分类列表
         */
        getTypeList () {
            this.$post('/student/shop_goods_type%5Cget_list_linkage', {}, resp => {
                if (resp.code === 1) {
                    this.typeList = resp.data.list;
                    this.typeList.map(item => {
                        item.nos = item.children.map(sItem => {
                            return sItem.no;
                        });
                        item.checkedLength = this.ruleForm.valid_goods_type_nos.filter(no => {
                            return item.nos.includes(no);
                        }).length;
                        if((item.checkedLength === item.nos.length) && item.children.length) {
                            this.typeSelection.push(item.no);
                        }
                    });
                }
            });
        },

        /**
         * 点击全选
         * @param event
         */
        handleCheckAll(event) {
            this.typeList.forEach((item, index) => {
                this.handleChange(event, item, index);
                if(event) {
                    this.typeSelection.push(item.no);
                } else {
                    this.typeSelection = [];
                }
            });
        },

        /**
         * 点击类目全选
         * @param event
         * @param index
         * @param item
         */
        handleChange(event, item, index) {
            if(event) {
                this.$set(item, 'checkedLength', item.nos.length);
                this.ruleForm.valid_goods_type_nos = Array.from(new Set([...item.nos, ...this.ruleForm.valid_goods_type_nos]));
            } else {
                this.ruleForm.valid_goods_type_nos = this.ruleForm.valid_goods_type_nos.filter(no => {
                    return !item.nos.includes(no);
                });
                this.$set(item, 'checkedLength', 0);
            }
        },

        /**
         * 点击显示二级分类、
         */
        handleClick(row, index) {
            if(row.show) {
                this.$set(row, 'show', false);
                this.now_index = -1;
            } else {
                this.$set(row, 'show', true);
                this.now_index = index;
            }
        },

        handleLeave(row) {
            this.$set(row, 'show', false);
            this.now_index = -1;
        },

        /**
         * 点击每一项二级分类
         * @param event
         * @param row
         */
        subTypeChange(event,row) {
            if(event) {
                this.$set(row, 'checkedLength', row.checkedLength + 1);
                if(row.checkedLength === row.nos.length) {
                    if(!this.typeSelection.includes(row.no)) {
                        this.typeSelection.push(row.no);
                    }
                }
            } else {
                this.$set(row, 'checkedLength', row.checkedLength - 1);
                if(row.checkedLength === 0) {
                    if(this.typeSelection.indexOf(row.no) !== -1) {
                        this.typeSelection.splice(this.typeSelection.indexOf(row.no), 1);
                    }
                }
            }
        },

        /**
         * 路由跳转
         * @param routeName
         * @param query
         */
        handleRoute(routeName, query) {
            this.$router.push({
                name: routeName,
                query
            });
        },

        /**
         * 预览
         */
        handlePreview() {
            let content = this.$refs.ueditor ? this.$refs.ueditor.getUEContent() : '';

            localStorage.setItem('ACTIVITY_AGREEMENT', content);
            const routeData = this.$router.resolve({
                name: 'activityAgreementPreview',
            });

            window.open(routeData.href, 'activityAgreementPreview');
        },

        /**
         * 选择店铺
         * @returns {Promise<void>}
         */
        async handleSelectShop(type = 'add') {
            let selectedData = type === 'add' ? [] : this.ruleForm.apply_shop_limit_shop_nos;
            let result = await shopSelectDialog({
                selectedData
            });

            if(result) {
                this.ruleForm.apply_shop_limit_shop_nos = result;
                this.getPageData();
            }
        },

        /**
         * 添加排名奖励
         */
        handleAddAward() {
            if(this.ruleForm.rank_award >= 10) {
                this.$message.warning('最多可设置10个');
                return;
            }
            this.ruleForm.rank_award.push({award_money: ''});
        },

        /**
         * 删除奖励项目
         * @param index
         * @param type
         */
        handleDelete(index, type) {
            if(this.ruleForm[type].length <= 1) {
                this.$message.warning('最少要保留一项');
                return;
            }
            this.ruleForm[type].splice(index, 1);
        },

        /**
         * 添加奖励瓜分设置
         */
        handleAdd() {
            this.ruleForm.pool_award_pool_step_set.push(deepClone(award_model));
        },

        /**
         * 添加奖励项目
         * @param type
         */
        handleAddOld(type) {
            let data = type === 'pool_award_pool_step' ? deepClone(award_step_model) : deepClone(award_model);
            let max = type === 'pool_award_pool_step' ? 5 : 6;

            if(this.ruleForm[type].length >= max) {
                this.$message.warning(`最多可设置${max}项`);
                return;
            }

            this.ruleForm[type].push(data);
        },

        /**
         * 处理商品分页数据
         */
        getPageData() {
            let data = this.getDataPagination(this.ruleForm.apply_shop_limit_shop_nos, this.page.now_page, 5);

            this.pageData = data.list;
            this.page.now_page = data.currentPage;
            this.page.total_count = data.total;
            this.page.page_size = data.pageSize;
        },

        /**
         * @name  getDataPagination
         * @desc  前端分页方法
         * @param  {Number} currentPage 当前页码，默认1
         * @param  {Number} pageSize 每页最多显示条数，默认10
         * @param  {Array} totalData 总的数据集，默认为空数组
         * @return {Object} {
                list, //当前页展示数据，数组
                currentPage, //当前页码
                pageSize, //每页最多显示条数
                total, //总的数据条数
            }
         **/
        getDataPagination (totalData = [], currentPage = 1, pageSize = 10) {
            const { length } = totalData;
            const tableData = {
                list: [],
                currentPage,
                pageSize,
                total: length
            };

            if (pageSize >= length) {
                tableData.list = totalData;
                tableData.currentPage = 1;
            } else {
                const num = pageSize * (currentPage - 1);

                if (num < length) {
                    const startIndex = num;
                    const endIndex = num + pageSize - 1;

                    tableData.list = totalData.filter((_, index) => index >= startIndex && index <= endIndex);
                } else {
                    const size = parseInt(length / pageSize);
                    const rest = length % pageSize;

                    if (rest > 0) {
                        tableData.currentPage = size + 1;
                        tableData.list = totalData.filter((_, index) => index >= (pageSize * size) && index <= length);
                    } else if (rest === 0) {
                        tableData.currentPage = size;
                        tableData.list = totalData.filter((_, index) => index >= (pageSize * (size - 1)) && index <= length);
                    }
                }
            }
            return tableData;
        },

        /**
         * 移除商家
         * @param row
         */
        handleRemove(row) {
            let index = this.ruleForm.apply_shop_limit_shop_nos.findIndex(item => {
                return item.shop_no === row.shop_no;
            });

            this.ruleForm.apply_shop_limit_shop_nos.splice(index, 1);
            this.getPageData();
        },
    }
};
</script>

<style scoped lang="less">
.wrapper {
    width: 100%;

    .content-wrapper {
        display: flex;
        height: calc(100% - 24px);
        flex-direction: column;
        position: relative;
        margin: 12px;
        background: #fff;
        box-sizing: border-box;
        overflow-y: auto;
        &::-webkit-scrollbar {
            width: 4px;
        }
        .back {
            font-size: 14px;
            font-family: PingFangSC-Medium, PingFang SC;
            font-weight: 500;
            color: #333333;
            cursor: pointer;
        }

        /deep/ .el-form {
            .is-required {
                .el-form-item__label {
                    &:before {
                        content: "*";
                        display: inline-block;
                        color: #F56C6C;
                    }
                }
            }
            .image-label {
                .el-form-item__label {
                    margin-top: 40px;
                }
            }
        }

        .form-view {
            background: #FBFBFB;
            border-radius: 2px;
            border: 1px solid #EEEEEE;
            margin: 24px 32px;
            box-sizing: border-box;
            padding: 32px;

            .form-tips {
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #999999;
                margin-left: 12px;
            }

            .radio-wrapper {
                margin-top: 12px;
                .radio-item {
                    margin-bottom: 24px;
                    display: flex;
                    line-height: 18px;
                    align-items: center;
                }
            }
            .task-logo-wrapper {
                /deep/ .pic-view {
                    display: flex;
                    align-items: flex-end;

                    .tips {
                        margin-bottom: 26px;
                    }
                }
            }

            .ueditor-tips {
                width: 862px;
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #FF8E39;
                display: flex;
                align-items: center;
                justify-content: space-between;
            }

            .type-wrapper {
                background: #F7F7F7;
                border-radius: 4px;
                border: 1px solid #DCDFE6;
                width: 920px;
                .type-header {
                    height: 54px;
                    padding: 0 24px;
                    border-bottom: 1px solid #DCDFE6;
                    display: flex;
                    align-items: center;
                }
                .type-content {
                    padding: 20px 24px;
                    display: flex;
                    flex-wrap: wrap;
                    .type-item {
                        width: 16.66%;
                        position: relative;
                        .type-label {
                            /*padding: 8px 12px;
                            border: 1px solid #f00;
                            border-radius: 4px;
                            background: #F7F7F7;
                            box-shadow: 0px 0px 20px 0px rgba(0, 0, 0, 0.16);*/
                        }
                        /deep/ .el-checkbox__label {
                            color: #999;
                        }
                        /deep/ .el-checkbox.is-checked {
                            .el-checkbox__label {
                                color: #333333;
                            }
                        }
                        .type-select-count {
                            color: #20A0FF;
                        }
                        .el-icon-caret-bottom {
                            color: #20A0FF;
                            cursor: pointer;
                        }
                        .sub-type-wrapper {
                            z-index: 999;
                            width: 218px;
                            position: absolute;
                            left: 0;
                            top: 40px;
                            display: flex;
                            flex-direction: column;
                            background: #F7F7F7;
                            box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.16);
                            padding: 8px 12px;
                            .sub-content {
                                display: flex;
                                flex-wrap: wrap;
                                .sub-type-item {
                                    width: 50%;
                                }
                            }
                        }
                    }
                }
            }

            .form-title {
                font-size: 16px;
                font-family: PingFangSC-Semibold, PingFang SC;
                font-weight: 600;
                color: #333333;
                padding-bottom: 12px;
                border-bottom: 1px solid #E9E9E9;
                margin-bottom: 24px;
                margin-top: 60px;
            }
            .upload-view {
                display: flex;
                align-items: center;
                /deep/ .el-upload {
                    width: 469px;
                    height: 88px;
                    margin-top: 12px;

                    .el-upload-dragger {
                        width: 469px;
                        height: 88px;
                        border-radius: 4px;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                        font-size: 12px;
                        .el-icon-upload {
                            font-size: 48px;
                            color: #C0C4CC;
                            margin: 0 10px 0 0;
                        }

                        .el-upload__text {
                            font-size: 14px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            line-height: 14px;
                        }
                    }
                }
                .el-upload__tip {
                    font-size: 12px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #999999;
                    margin-left: 12px;
                }
                img {
                    width: 100%;
                    height: 100%;
                    object-fit: cover;
                }
            }
        }

        .new-version {
            .rank-wrapper {
                background: #F7F7F7;
                border-radius: 4px;
                border: 1px solid #EEEEEE;
                padding: 24px;
                .rank-list {
                    display: flex;
                    flex-wrap: wrap;
                    margin: -24px 0 0 -24px;
                    .rank-item {
                        width: 30.8%;
                        margin: 24px 0 0 24px;
                        &__header {
                            font-size: 14px;
                            font-family: PingFangSC-Regular, PingFang SC;
                            font-weight: 400;
                            color: #333333;
                            margin-bottom: 10px;
                            display: flex;
                            align-items: center;
                            justify-content: space-between;
                            line-height: 14px;
                            .el-button {
                                padding: 0;
                            }
                        }
                    }
                }
                .empty-text {
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #999999;
                    line-height: 14px;
                }
                .add-button {
                    width: 120px;
                    height: 36px;
                    border-radius: 4px;
                    border: 1px solid #20A0FF;
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #20A0FF;
                    background: #fff;
                    margin-top: 24px;
                }
            }
            .award-wrapper {
                background: #F7F7F7;
                border-radius: 4px;
                border: 1px solid #EEEEEE;
                padding: 24px 24px 2px;
                .award-item {
                    display: flex;
                    align-items: center;
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #333333;
                    margin-bottom: 24px;
                    span {
                        margin-right: 10px;
                    }
                    .delete {
                        margin-left: 24px;
                        cursor: pointer;
                        font-size: 14px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #666666;
                        user-select: none;
                    }
                }
                .add-button {
                    width: 120px;
                    height: 36px;
                    border-radius: 4px;
                    border: 1px solid #20A0FF;
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #20A0FF;
                    background: #fff;
                }
            }
        }
        .old-version {
            .rank-wrapper {
                background: #F7F7F7;
                border-radius: 4px;
                border: 1px solid #EEEEEE;
                display: flex;
                .rank-item {
                    flex: 1;
                    padding: 20px 16px;
                    &:not(&:last-of-type) {
                        border-right: 1px solid #EEEEEE;
                    }
                    &__title {
                        font-size: 14px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #333333;
                    }
                }
            }

            .award-wrapper {
                background: #F7F7F7;
                border-radius: 4px;
                border: 1px solid #EEEEEE;
                padding: 32px 24px;
                .award-item {
                    display: flex;
                    align-items: center;
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #333333;
                    margin-bottom: 24px;
                    span {
                        margin-right: 10px;
                    }
                    .delete {
                        margin-left: 24px;
                        cursor: pointer;
                        font-size: 14px;
                        font-family: PingFangSC-Regular, PingFang SC;
                        font-weight: 400;
                        color: #666666;
                        user-select: none;
                    }
                }
                .add-button {
                    width: 120px;
                    height: 36px;
                    border-radius: 4px;
                    border: 1px solid #20A0FF;
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #20A0FF;
                    background: #fff;
                }
            }
        }


        .shop-wrapper {
            width: 598px;
            background: #FFFFFF;
            border-radius: 4px;
            border: 1px solid #EEEEEE;
            .shop-header {
                height: 54px;
                background: #FFFFFF;
                border-radius: 4px 4px 0 0;
                border-bottom: 1px solid #EEEEEE;
                font-size: 14px;
                font-family: PingFangSC-Medium, PingFang SC;
                font-weight: 500;
                color: #333333;
                padding: 0 35px;
                display: flex;
                align-items: center;
            }
            .shop-content {
                padding: 24px 0 0;
                .btn-view {
                    display: flex;
                    align-items: center;
                    justify-content: flex-end;
                    margin-bottom: 16px;
                    padding: 0 24px;
                }
                .table-wrapper {
                    padding: 0 24px;
                }
                .table-footer {
                    height: 50px;
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 0 24px;
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #333333;
                    border-top: 1px solid #EBEEF5;
                    .count {
                        color: #F53341;
                    }
                    .pagination {
                        margin-top: 12px;
                    }
                }
            }
            .shop-content-empty {
                height: 272px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                line-height: normal;
                .empty-title {
                    font-size: 14px;
                    font-family: PingFangSC-Medium, PingFang SC;
                    font-weight: 500;
                    color: #333333;
                    margin-bottom: 16px;
                }
                .empty-sub-title {
                    font-size: 12px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #333333;
                    margin-bottom: 20px;
                }
                .empty-btn {
                    width: 130px;
                    height: 36px;
                    background: rgba(255, 255, 255, 0);
                    border-radius: 4px;
                    border: 1px solid #1890FF;
                    font-size: 14px;
                    font-family: PingFangSC-Regular, PingFang SC;
                    font-weight: 400;
                    color: #1890FF;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    cursor: pointer;
                }
            }
        }

        /*footer*/

        .footer {
            box-sizing: border-box;
            padding-left: 176px;
            margin-top: 8px;
            margin-bottom: 52px;

            .el-button {
                width: 120px;
                margin: 0 16px 12px;
            }
        }
    }

    /deep/ .el-dialog__header {
        padding-top: 10px;
        box-shadow: 0px 1px 0px 0px rgba(233, 233, 233, 1);
        display: flex;
        align-items: center;
        background: #FAFAFA;
        border-radius: 4px 4px 0 0;

        .el-dialog__title {
            font-weight: 500;
            color: #333;
            font-size: 14px;
        }

        .el-icon-close:before {
            color: rgb(194, 194, 194);
            font-size: 17px;
            font-weight: bold;
        }

        .el-dialog__headerbtn {
            top: 14px;
        }
    }

    /deep/ .el-textarea__inner {
        resize: none;
    }

    /deep/.edui-default {
        .edui-editor {
            width: 862px!important;
        }
    }
    /deep/ .el-input-number .el-input__inner {
        text-align: left;
    }

    /deep/ .pic-view {
        display: flex;
        align-items: flex-end;

        .tips {
            margin-bottom: 40px;
        }
        .pic-item {
            margin-bottom: 0!important;
        }
        .uploader-customer {
            background: #fff!important;
        }
    }
}

/deep/ .el-table {
    &::before {
        height: 0;
    }
    .el-table__row {
        &:last-of-type {
            td {
                border: none;
            }
        }
    }
    th {
        background: #f2f2f2!important;
        font-size: 14px!important;
        font-family: PingFangSC-Medium, PingFang SC!important;
        font-weight: 500!important;
        color: #333333!important;
        height: 44px!important;
        padding: 0!important;
    }
}

/deep/ .el-input-number {
    input {
        text-align: left;
    }
}
</style>

